<template>
  <div class="content">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>{{ t(String(route.meta.title)) }}</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <span class="save"></span>
      </template>
    </nut-navbar>

    <!-- tabs -->
    <nut-tabs @change="tabChange" v-model="value" title-scroll title-gutter="10" v-if="approvalTabList">
      <template #titles>
        <div v-for="item in approvalTabList" :key="item.id" class="custom-tab-item" :class="{
          active: value === item.id
        }" @click="tabChange(item)">
          <div class="custom-title" :class="{
            active: value === item.id
          }">
            {{ t(item.name) }}
            <span v-if="item.badge > 0" class="badge">{{ item.badge }}</span>
          </div>
        </div>
      </template>
      <nut-tab-pane :pane-key="item.id" v-for="item in approvalTabList" :key="item.id">

        <!-- 搜索 -->
        <div class="search_box">
          <nut-searchbar class="search_input" :max-length="30" :placeholder="t('club_page_searchid')"
            v-model="searchVal" @change="onClickSearch" shape="square" background="transparent"
            input-background="#1D1C3C">
            <template #leftin>
              <iconpark-icon name="sousuo" size="14" />
            </template>
          </nut-searchbar>
          <span class="search_btn" v-if="value == 1" @click="getSearchUnapprovedList">{{ t('club_page_ss') }}</span>
          <span class="search_btn" v-else @click="clubSearchAdminList">{{ t('club_page_ss') }}</span>
        </div>
        <!-- 成员 -->
        <div class="con_list" :style="contentStyle()">
          <nut-infinite-loading v-model="infinityValue" load-more-txt=" " :has-more="hasMore" @load-more="onLoad">
            <nut-empty v-if="approvalList.length == 0" :description="t('nomore_data')"></nut-empty>
            <div class="member_container" v-else>
              <div v-for="member in approvalList" :key="member.role_id" class="member_item">
                <div class="member_info">
                  <img :src="typeof member.head_photo === 'number' || !isNaN(Number(member.head_photo))
                    ? `/imgs/head_icons/${member.head_photo}.webp`
                    : joinURL(settings.media_url, member.head_photo)" alt="" class="member_avatar" />
                  <div class="info">
                    <div class="name_section">
                      <p class="member_name">{{ member.username }}</p>
                    </div>
                    <span class="vip_tag" :class="'vip_' + member.level">
                      <ImgT :key="member.level" :src="`/imgs/vip/vipIcon/vip_${member.level}.webp`" alt="" />
                    </span>
                  </div>
                </div>
                <div class="member_actions" v-if="value == 1">
                  <span class="action_btn pass" @click="getClubApprove(member, 1)" v-if="member.approval_state === 0">
                    {{ t('club_page_tongguo') }}
                  </span>
                  <span class="action_btn reject" @click="getClubApprove(member, 2)" v-if="member.approval_state === 0">
                    {{ t('club_page_jujue') }}
                  </span>
                  <span class="text passed" v-if="member.approval_state === 1">{{ t('club_page_ytongguo') }}</span>
                  <span class="text rejected" v-if="member.approval_state === 2">{{ t('club_page_yjujue') }}</span>
                </div>
                <div class="member_actions" v-if="value == 2">
                  <span class="action_btn pass" @click="getClubAdminApprove(member, 3)"
                    v-if="member.approval_state === 0 || member.approval_state === 2">
                    {{ t('club_page_tongguo') }}
                  </span>
                  <span class="action_btn reject" @click="getClubAdminApprove(member, 4)"
                    v-if="member.approval_state === 0 || member.approval_state === 2">
                    {{ t('club_page_jujue') }}
                  </span>
                  <span class="text passed" v-if="member.approval_state === 3">{{ t('club_page_ytongguogly') }}</span>
                  <span class="text rejected" v-if="member.approval_state === 4">{{ t('club_page_yjujuegly') }}</span>
                </div>
              </div>
            </div>
          </nut-infinite-loading>
        </div>
      </nut-tab-pane>
    </nut-tabs>

  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { useI18n } from "vue-i18n";
import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { joinURL } from '@/utils/publicMethods'

import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import { User } from "@/store/user";
const { appHeight } = storeToRefs(User(pinia));
import { showToast } from "@nutui/nutui";

const {
  settings,
} = storeToRefs(Page(pinia));

const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const value = ref(1)
const approvalTabList = reactive([
  {
    id: 1,
    name: t('club_page_cysh'),
    badge: 0
  },
  {
    id: 2,
    name: t('club_page_adminsh'),
    badge: 0
  },
]);
const seleteType: any = ref(t('club_page_cysh'));
const clubId: any = ref(null);
const searchVal = ref('')
const searchValFalg = ref(false)
const infinityValue = ref(false);
const hasMore = ref(true);
const approvalList = ref<any>([]);
const params: any = reactive({
  // 参数
  pageSize: 10,
  page: 1,
});

const tabChange = (item: any) => {
  console.log('item', item)
  params.page = 1;
  approvalList.value = []
  infinityValue.value = false;
  hasMore.value = true;
  value.value = item.id
  const obj: any = {
    1: t('club_page_cysh'),
    2: t('club_page_adminsh'),
  }
  seleteType.value = obj[item.title]
  if (item.id === 1) {
    getUnapprovedList()
  } else {
    clubAdminList()
  }
}

const contentStyle = () => {
  return window.matchMedia("(display-mode: standalone)").matches ||
    window.navigator.standalone
    ? { height: `calc(${appHeight.value}px - 200px)` }
    : { height: `calc(${appHeight.value}px - 200px)` };
};

const onClickSearch = () => {
  if (searchVal.value) {
    if (/^\d+$/.test(searchVal.value)) {
      searchValFalg.value = true
    } else {
      searchValFalg.value = false
    }
  }
}


// 成员审核列表
const getUnapprovedList = () => {
  infinityValue.value = true; // 开始加载
  const req = NetPacket.req_member_approved_status_list();
  req.club_id = Number(clubId.value);
  req.username = searchValFalg.value ? '' : searchVal.value
  req.role_id = searchValFalg.value ? Number(searchVal.value) : 0
  req.page = params.page
  req.page_size = params.pageSize;
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_member_approved_status_list",
    callback: getUnapprovedListHandle,
  });
}
const getUnapprovedListHandle = (res: any) => {
  if (res.info.length < params.pageSize) {
    hasMore.value = false;
  } else {
    hasMore.value = true;
  }
  approvalList.value = [...approvalList.value, ...res.info];
  approvalTabList[0].badge = res.unapprove_member_count
  approvalTabList[1].badge = res.unapprove_admin_count
  infinityValue.value = false;
}

const onLoad = () => {
  params.page++;
  if (value.value == 1) {
    getUnapprovedList();
  } else {
    clubAdminList();
  }

};

const rlt_type = ref(1)
// 成员审核操作
const getClubApprove = (member: any, rlt: number) => {
  rlt_type.value = rlt
  const req = NetPacket.req_club_approve();
  req.club_id = Number(clubId.value);
  req.role_id = member.role_id
  req.rlt = rlt
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_club_operate",
    callback: getClubApproveHandle,
  });
}
const getClubApproveHandle = (res: any) => {
  const tipStr: any = {
    0: rlt_type.value == 1 ? t('club_page_addjlbytg') : t('club_page_addjlbyjj'),
    1: t('club_page_shenqingshibai'),
  };
  if (res.rlt === 0) {
    showToast.text(t(tipStr[res.rlt]))
    getSearchUnapprovedList();
  } else {
    showToast.text(t(tipStr[res.rlt]))
  }
}

//管理员申请列表
const clubAdminList = () => {
  infinityValue.value = true; // 开始加载
  const req = NetPacket.req_club_admin_list();
  req.club_id = clubId.value;
  req.username = searchValFalg.value ? '' : searchVal.value
  req.role_id = searchValFalg.value ? Number(searchVal.value) : 0
  req.page = params.page
  req.page_size = params.pageSize;
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_club_admin_list",
    callback: clubAdminListHandle,
  });
}
//管理员申请列表返回
const clubAdminListHandle = (res: any) => {
  if (res.info.length < params.pageSize) {
    hasMore.value = false;
  } else {
    hasMore.value = true;
  }
  approvalList.value = [...approvalList.value, ...res.info];
  approvalTabList[0].badge = res.unapprove_member_count
  approvalTabList[1].badge = res.unapprove_admin_count
  infinityValue.value = false;
}

// 管理员审核操作
const getClubAdminApprove = (member: any, rlt: number) => {
  const req = NetPacket.req_club_admin_approve();
  req.club_id = Number(clubId.value);
  req.role_id = member.role_id
  req.rlt = rlt
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_club_admin_approve",
    callback: getClubAdminApproveHandle,
  });
}
const getClubAdminApproveHandle = (res: any) => {
  const tipStr: any = {
    0: rlt_type.value == 1 ? t('club_page_adminytg') : t('club_page_adminyjj'),
    1: t('club_page_bszjcjjlb'),
    2: t('club_page_bscy'),
  };
  if (res.rlt === 0) {
    showToast.text(t(tipStr[res.rlt]))
    clubSearchAdminList();
  } else {
    showToast.text(t(tipStr[res.rlt]))
  }
}

const resetData = () => {
  params.page = 1;
  approvalList.value = []
  infinityValue.value = false;
  hasMore.value = true;
};

const getSearchUnapprovedList = () => {
  resetData()
  getUnapprovedList()
}

const clubSearchAdminList = () => {
  resetData()
  clubAdminList()
}

watch(
  () => route.query.club_id,
  (newId) => {
    clubId.value = String(newId)
  },
  { immediate: true }
);

onMounted(() => {
  seleteType.value = t('club_page_cysh')
  value.value = 1
  const { club_id } = route.query;
  clubId.value = String(club_id)
  getUnapprovedList()
});

onUnmounted(() => {

});
</script>

<style scoped lang="scss">
.content {
  font-size: 14px;
  margin: 0 0 10px;

  .arrow_left {
    width: 24px;
    height: 24px;
  }

  .save {
    line-height: 32px;
    text-align: center;
    color: #5BD9FF;
  }

  .search_box {
    // width: 347px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search_input {

    :deep(.square) {
      border-radius: 8px;
      height: 44px;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    }
  }

  .search_btn {
    width: 82px;
    height: 44px;
    margin-right: 14px;
    font-size: 14px;
    line-height: 44px;
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
    box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
    border-radius: 8px;
  }

  .con_list {
    overflow: auto;
  }

  .member_container {
    // padding: 20px;
    width: 347px;
    margin: 0 auto;

    .member_item {
      height: 62px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      border-radius: 10px;
      padding: 10px 15px;
      margin-bottom: 10px;
      position: relative;

      .member_info {
        display: flex;
        align-items: center;


        .member_avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .info {
          display: flex;
          flex-direction: column;

          .name_section {
            display: flex;
            align-items: center;
            gap: 8px;


            .member_name {
              font-size: 14px;
              font-weight: bold;
              margin: 0;
              color: #FFFFFF;
            }

            .tag {
              width: 45px;
              height: 36px;
              line-height: 32px;
              font-size: 10px;
              border-radius: 6px;
              color: #fff;
              position: absolute;
              left: 0;
              top: 0;
              z-index: 99;

              .tag_text {
                display: inline-block;
                transform: rotate(-40deg);
              }
            }

            .tag.creator {
              background: url(/imgs/club/cjz.png) no-repeat;
              background-size: 100% 100%;
            }

            .tag.admin {
              background: url(/imgs/club/gly.png) no-repeat;
              background-size: 100% 100%;
            }
          }

          .vip_tag {
            margin-top: 5px;

            img {
              width: 50px;
              height: 20px;
            }
          }
        }
      }

      .member_actions {
        display: flex;
        gap: 10px;

        .action_btn {
          height: 32px;
          line-height: 32px;
          font-size: 12px;
          text-align: center;
          color: #C6C4F5;
          padding: 0 8px;
          background: #282747;
          box-shadow: 0.5px 0.5px 1px 0px #C6C4F5 inset;
          border-radius: 8px;
        }

        .pass {
          background-color: #1DBA8B;
          color: #ffffff;
        }

        .reject {
          background-color: #282747;
          color: #C6C4F5;
        }

        .text {
          height: 32px;
          line-height: 32px;
          font-size: 12px;
        }

        .passed {
          color: #1DBA8B;
        }

        .rejected {
          color: #C6C4F5;
        }
      }
    }
  }


  .custom-tab-item {
    margin: 0 auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: relative;

    .custom-title {
      color: #C5C3F4;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
      /* 100% */
    }

    .custom-title.active {
      color: #5B6CFF;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 14px;
      /* 100% */
    }

    .badge {
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 18px;
      position: absolute;
      top: 0;
      right: 36px;
      display: inline-block;
      background: red;
      color: white;
      font-size: 10px;
      border-radius: 10px;
    }
  }

  .custom-tab-item.active {
    border-bottom: 2px solid #5B6CFF;
  }

  :deep(.nut-tabs .nut-tabs__titles) {
    width: 347px;
    margin: 0 auto;
  }

}
</style>
